<template>
	<view class="pet-health-web-app">
		<!-- 顶部导航栏 -->
		<view class="top-navbar">
			<view class="container-fluid">
				<view class="row align-items-center">
					<view class="col-lg-3 col-md-3 col-sm-12">
						<view class="logo">
							<image src="/static/petLogo.png" mode="aspectFit"></image>
							<text class="titleText">宠物健康管家</text>
						</view>
					</view>
					<view class="col-lg-6 col-md-6 col-sm-12">
						<view class="navbar-center">
							<!-- 分类导航移到这里 -->
							<view class="nav-categories">
								<view class="nav-item" @click="goIndex">
									<text class="titleText">首页</text>
								</view>
								<view class="nav-item" @click="goShop">
									<text class="titleText">商城</text>
								</view>
								<view class="nav-item" @click="goForum">
									<text class="titleText">论坛</text>
								</view>
							</view>
							<!-- 搜索栏缩短 -->
							<view class="search-container">
								<image src="/static/index/search-icon.png" mode="aspectFill"></image>
								<input type="text" placeholder="搜索宠物食品" class="search-input" />
								<button class="search-btn">搜索</button>
							</view>
						</view>
					</view>
					<view class="col-lg-3">
						<view class="user-actions">
							<view class="action-item" @click="goMine">
								<image src="/static/Tabbar/mine.png" style="width: 60rpx;height: 60rpx;"
									mode="aspectFill"></image>
								<text class="titleText">我的账户</text>
							</view>
							<view class="action-item" @click="goShopCar">
								<image src="/static/Tabbar/shop.png" style="width: 60rpx;height: 60rpx;"
									mode="aspectFill"></image>
								<text class="titleText">购物车</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 主要内容区域 -->
		<view class="main-content container">
			<!-- 宠物信息卡片 -->
			<view class="row">
				<view class="col-lg-12">
					<view class="pet-profile-card" @click="petInfo">
						<view class="row align-items-center">
							<view class="col-lg-2 col-md-3 col-sm-4">
								<image :src="avatar" class="pet-avatar"></image>
							</view>
							<view class="col-lg-10 col-md-9 col-sm-8">
								<view class="pet-info">
									<text class="pet-name">{{ petName }}</text>
									<text class="pet-detail">{{ petType }} | {{ petAge }}岁</text>
									<text class="pet-detail" style="margin-left: 40rpx;">{{ notes }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 健康档案与个性化推荐 -->
			<view class="row mt-4">
				<!-- 健康档案部分 -->
				<view class="col-lg-7 col-md">
					<view class="health-archive">
						<view class="section-title" @click="healthFiles">
							<text class="title-text">健康档案</text>
						</view>
						<view class="row archive-cards">
							<view class="col-md-6 mb-3">
								<view class="archive-card">
									<view class="card-icon">
										<image src="/static/health/weight.png" class="iconfont" mode="aspectFill">
										</image>
									</view>
									<view class="card-content">
										<text class="card-label">体重</text>
										<text class="card-value">{{ petWeight }}kg</text>
										<text class="card-status">{{ weightStatus }}</text>
									</view>
								</view>
							</view>
							<view class="col-md-6 mb-3">
								<view class="archive-card">
									<view class="card-icon">
										<image src="/static/health/yingyang.png" class="iconfont" mode="aspectFill">
										</image>
									</view>
									<view class="card-content">
										<text class="card-label">营养状况</text>
										<text class="card-value">{{ nutritionStatus }}</text>
									</view>
								</view>
							</view>
						</view>

						<view class="row archive-cards">
							<view class="col-md-6 mb-3">
								<view class="archive-card">
									<view class="card-icon">
										<image src="/static/health/shengzhang.png" class="iconfont" mode="aspectFill">
										</image>
									</view>
									<view class="card-content">
										<text class="card-label">生长发育</text>
										<text class="card-value">{{ growthStatus }}</text>
									</view>
								</view>
							</view>
							<view class="col-md-6 mb-3">
								<view class="archive-card">
									<view class="card-icon">
										<image src="/static/health/tijian.png" class="iconfont" mode="aspectFill">
										</image>
									</view>
									<view class="card-content">
										<text class="card-label">体检建议</text>
										<text class="card-value">{{ checkupAdvice }}</text>
									</view>
								</view>
							</view>
						</view>

						<view class="recommended-product">
							<text class="recommend-title">推荐产品</text>
							<view class="product-card">
								<view class="row align-items-center" @click="onProductClick(recommendedProduct)">
									<view class="col-md-3 col-sm-4">
										<image :src="recommendedProduct.image" class="product-image"></image>
									</view>
									<view class="col-sm-8">
										<view class="product-info">
											<text class="product-name">{{ recommendedProduct.name }}</text>
											<text class="product-desc">{{ recommendedProduct.desc }}</text>
											<text class="product-price">¥{{ recommendedProduct.price }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 个性化推荐部分 -->
				<view class="col-lg-5 col-md-12">
					<view class="personalized-recommend">
						<view class="section-title">
							<text class="title-text">个性化推荐</text>
						</view>
						<view class="recommend-content">
							<view class="recommend-card" v-for="(item, index) in recommendList" :key="index"
								@click="onProductClick(item)">
								<view class="row align-items-center">
									<view class="col-md-4 col-sm-4">
										<image :src="item.image" class="recommend-image"></image>
									</view>
									<view class="col-md-8 col-sm-8">
										<view class="recommend-info">
											<text class="recommend-name">{{ item.name }}</text>
											<text class="recommend-desc">{{ item.desc }}</text>
											<text class="recommend-price">¥{{ item.price }}</text>
											<view class="buy-btn">购买</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 健康知识模块 -->
			<view class="row mt-4">
				<view class="col-12">
					<view class="health-knowledge">
						<view class="section-title">
							<text class="title-text">健康知识</text>
						</view>
						<view class="row knowledge-items">
							<view class="col-lg-4 col-md-6 mb-3" @click="goMsg(index)"
								v-for="(item, index) in knowledgeList" :key="index">
								<view class="knowledge-item">
									<image :src="item.image" class="knowledge-image"></image>
									<text class="knowledge-title">{{ item.title }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 页脚 -->
		<view class="footer">
			<view class="container">
				<view class="row">
					<view class="col-lg-3 col-md-6 col-sm-12">
						<view class="footer-section">
							<text class="footer-title">关于我们</text>
							<text class="footer-link">公司简介</text>
							<text class="footer-link">发展历程</text>
							<text class="footer-link">联系方式</text>
						</view>
					</view>
					<view class="col-lg-3 col-md-6 col-sm-12">
						<view class="footer-section">
							<text class="footer-title">客户服务</text>
							<text class="footer-link">帮助中心</text>
							<text class="footer-link">售后政策</text>
							<text class="footer-link">投诉建议</text>
						</view>
					</view>
					<view class="col-lg-3 col-md-6 col-sm-12">
						<view class="footer-section">
							<text class="footer-title">商务合作</text>
							<text class="footer-link">商家入驻</text>
							<text class="footer-link">品牌合作</text>
							<text class="footer-link">营销中心</text>
						</view>
					</view>
					<view class="col-lg-3 col-md-6 col-sm-12">
						<view class="footer-section">
							<text class="footer-title">关注我们</text>
							<view class="social-links">
								<text class="social-icon iconfont icon-weixin"></text>
								<text class="social-icon iconfont icon-weibo"></text>
								<text class="social-icon iconfont icon-douyin"></text>
							</view>
							<text class="footer-contact">客服热线：400-123-4567</text>
						</view>
					</view>
				</view>
				<view class="copyright">
					<text>© 2025 宠物健康管家 All Rights Reserved</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userApi,
		productApi
	} from '@/api/user.js'

	export default {
		data() {
			return {
				petName: '',
				avatar: '',
				petType: '',
				petWeight: '',
				petAge: '',
				notes: '',
				weightStatus: '',
				nutritionStatus: '',
				growthStatus: '',
				checkupAdvice: '',
				scrolled: false,
				knowledgeList: [{
						title: '宠物营养均衡指南',
						image: '/static/health/petHea.jpg'
					},
					{
						title: '犬类常见疾病预防',
						image: '/static/health/dogSc.jpg'
					},
					{
						title: '宠物疫苗接种建议',
						image: '/static/health/yimiao.jpg'
					}
				],
				recommendList: [],
				recommendedProduct: {
					name: '',
					desc: '',
					image: '/static/pet-test.png',
					price: 0,
					id: 0
				},
				allProducts: [], // 存储所有商品数据
				userId: '',
				// 常见犬种理想体重范围(kg)
				dogWeightStandards: {
					'萨摩耶': {
						'min': 16,
						'max': 30,
						'puppy1Y': 15
					},
					'金毛': {
						'min': 25,
						'max': 34,
						'puppy1Y': 20
					},
					'拉布拉多': {
						'min': 25,
						'max': 36,
						'puppy1Y': 20
					},
					'哈士奇': {
						'min': 16,
						'max': 27,
						'puppy1Y': 15
					},
					'柯基': {
						'min': 10,
						'max': 14,
						'puppy1Y': 8
					},
					'比熊': {
						'min': 3,
						'max': 6.5,
						'puppy1Y': 3
					},
					'贵宾': {
						'min': 3,
						'max': 8,
						'puppy1Y': 3
					},
					'博美': {
						'min': 1.5,
						'max': 3.5,
						'puppy1Y': 1.5
					},
					'柴犬': {
						'min': 8,
						'max': 12,
						'puppy1Y': 7
					},
					'阿拉斯加': {
						'min': 32,
						'max': 50,
						'puppy1Y': 25
					}
				},
				// 常见猫咪理想体重范围(kg)
				catWeightStandards: {
					'英短': {
						'min': 3.5,
						'max': 7,
						'kitten1Y': 3
					},
					'美短': {
						'min': 3.5,
						'max': 7,
						'kitten1Y': 3
					},
					'暹罗': {
						'min': 2.5,
						'max': 5.5,
						'kitten1Y': 2.5
					},
					'布偶': {
						'min': 4,
						'max': 9,
						'kitten1Y': 3.5
					},
					'波斯': {
						'min': 3,
						'max': 6,
						'kitten1Y': 2.5
					},
					'缅因': {
						'min': 5,
						'max': 11,
						'kitten1Y': 4
					},
					'蓝猫': {
						'min': 3,
						'max': 6,
						'kitten1Y': 2.5
					},
					'橘猫': {
						'min': 3.5,
						'max': 7,
						'kitten1Y': 3
					},
					'加菲猫': {
						'min': 3.5,
						'max': 6.5,
						'kitten1Y': 3
					},
					'豹猫': {
						'min': 4.5,
						'max': 8.5,
						'kitten1Y': 4
					}
				}
			}
		},
		mounted() {
			this.userId = uni.getStorageSync('userId')
			// 先获取所有商品，再获取宠物信息
			this.getGoods().then(() => {
				this.getPetInfo()
			})
		},
		methods: {
			onProductClick(product) {
				getApp().globalData.currentGoodId = product.id
				// 跳转到产品详情页
				uni.navigateTo({
					url: '/pages/shop/goods'
				})
			},
			async getGoods() {
				try {
					const result = await productApi.getProductList()
					// 保存完整商品数据
					this.allProducts = result || []
					console.log('获取商品成功：', this.allProducts)
					return result
				} catch (error) {
					uni.showToast({
						title: '获取商品失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
					console.error('获取商品失败', error);
					return null
				}
			},
			async getPetInfo() {
				try {
					const result = await userApi.getPetInfo({
						userId: this.userId
					})
					if (result) {
						this.petName = result.petName || ''
						this.avatar = result.avatar || ''
						this.petType = result.petType || ''
						this.petWeight = result.petWeight || ''
						this.petAge = result.petAge || ''
						this.notes = result.notes || ''
					} else {
						this.petName = '暂无信息'
						this.avatar = ''
						this.petType = '暂无信息'
						this.petWeight = ''
						this.petAge = '暂无信息'
						this.notes = '暂无信息'
					}

					console.log('获取宠物信息成功：', result);

					// 分析宠物健康状况
					this.analyzeHealthStatus()
				} catch (error) {
					uni.showToast({
						title: '获取宠物信息失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
					console.error('获取宠物信息失败：', error);
				}
			},
			analyzeHealthStatus() {
				const weight = parseFloat(this.petWeight)
				const age = parseFloat(this.petAge)
				const petType = this.petType

				// 判断是猫还是狗
				const isDog = this.isDogType(petType)
				const isCat = this.isCatType(petType)

				// 设置默认值
				this.weightStatus = '正常'
				this.nutritionStatus = '良好'
				this.growthStatus = '正常'
				this.checkupAdvice = '定期体检'

				let healthCondition = 'normal' // 用于筛选产品的健康状况标识（normal, underweight, overweight）
				let petCategory = isDog ? 'dog' : (isCat ? 'cat' : 'other')
				let ageGroup = age <= 1 ? 'young' : (age >= 7 ? 'senior' : 'adult')

				if (isDog) {
					healthCondition = this.analyzeDogHealth(petType, weight, age)
				} else if (isCat) {
					healthCondition = this.analyzeCatHealth(petType, weight, age)
				} else {
					// 其他宠物类型或无法识别，使用通用评估
					healthCondition = this.analyzeGenericHealth(weight, age)
				}

				// 根据健康状况和宠物信息筛选推荐产品
				this.selectRecommendedProducts(healthCondition, petCategory, ageGroup)
			},
			isDogType(type) {
				return Object.keys(this.dogWeightStandards).some(dogType =>
						type.includes(dogType) || dogType.includes(type)) || type.toLowerCase().includes('犬') || type
					.toLowerCase().includes('狗')
			},
			isCatType(type) {
				return Object.keys(this.catWeightStandards).some(catType =>
					type.includes(catType) || catType.includes(type)) || type.toLowerCase().includes('猫')
			},
			analyzeDogHealth(petType, weight, age) {
				// 寻找最匹配的犬种标准
				let matchedType = this.findMatchingType(petType, this.dogWeightStandards)
				let healthCondition = 'normal'

				if (!matchedType) {
					// 找不到匹配品种，使用通用标准
					healthCondition = this.analyzeGenericHealth(weight, age)
					return healthCondition
				}

				const standard = this.dogWeightStandards[matchedType]

				// 针对幼犬与成犬分别处理
				if (age <= 1) {
					const expectedWeight = standard.puppy1Y
					if (weight < expectedWeight * 0.8) {
						this.setUnderweightStatus(true)
						healthCondition = 'underweight'
					} else if (weight > expectedWeight * 1.2) {
						this.setOverweightStatus(true)
						healthCondition = 'overweight'
					} else {
						this.setNormalWeightStatus(true)
						healthCondition = 'normal'
					}
				} else {
					// 成犬
					if (weight < standard.min) {
						this.setUnderweightStatus(false)
						healthCondition = 'underweight'
					} else if (weight > standard.max) {
						this.setOverweightStatus(false)
						healthCondition = 'overweight'
					} else {
						this.setNormalWeightStatus(false)
						healthCondition = 'normal'
					}
				}

				return healthCondition
			},
			analyzeCatHealth(petType, weight, age) {
				// 寻找最匹配的猫咪标准
				let matchedType = this.findMatchingType(petType, this.catWeightStandards)
				let healthCondition = 'normal'

				if (!matchedType) {
					// 找不到匹配品种，使用通用标准
					healthCondition = this.analyzeGenericHealth(weight, age)
					return healthCondition
				}

				const standard = this.catWeightStandards[matchedType]

				// 针对幼猫与成猫分别处理
				if (age <= 1) {
					const expectedWeight = standard.kitten1Y
					if (weight < expectedWeight * 0.8) {
						this.setUnderweightStatus(true)
						healthCondition = 'underweight'
					} else if (weight > expectedWeight * 1.2) {
						this.setOverweightStatus(true)
						healthCondition = 'overweight'
					} else {
						this.setNormalWeightStatus(true)
						healthCondition = 'normal'
					}
				} else {
					// 成猫
					if (weight < standard.min) {
						this.setUnderweightStatus(false)
						healthCondition = 'underweight'
					} else if (weight > standard.max) {
						this.setOverweightStatus(false)
						healthCondition = 'overweight'
					} else {
						this.setNormalWeightStatus(false)
						healthCondition = 'normal'
					}
				}

				return healthCondition
			},
			analyzeGenericHealth(weight, age) {
				// 简单通用评估逻辑
				let healthCondition = 'normal'

				if (weight <= 0 || weight > 100) {
					this.weightStatus = '数据异常'
					this.nutritionStatus = '需兽医评估'
					this.growthStatus = '需兽医评估'
					this.checkupAdvice = '建议立即体检'
					healthCondition = 'abnormal'
				} else if (weight < 3) {
					this.setUnderweightStatus(age <= 1)
					healthCondition = 'underweight'
				} else if (weight > 50) {
					this.setOverweightStatus(age <= 1)
					healthCondition = 'overweight'
				} else {
					this.setNormalWeightStatus(age <= 1)
					healthCondition = 'normal'
				}

				return healthCondition
			},
			findMatchingType(petType, standards) {
				// 尝试精确匹配
				if (standards[petType]) return petType

				// 尝试模糊匹配
				for (const standardType in standards) {
					if (petType.includes(standardType) || standardType.includes(petType)) {
						return standardType
					}
				}

				return null // 无匹配
			},
			setUnderweightStatus(isPuppy) {
				this.weightStatus = '偏瘦'
				this.nutritionStatus = '需补充营养'
				this.growthStatus = isPuppy ? '生长缓慢' : '体重不足'
				this.checkupAdvice = '建议体检评估'
			},
			setOverweightStatus(isPuppy) {
				this.weightStatus = '偏胖'
				this.nutritionStatus = '营养过剩'
				this.growthStatus = isPuppy ? '发育过快' : '需减重'
				this.checkupAdvice = '控制饮食适当运动'
			},
			setNormalWeightStatus(isPuppy) {
				this.weightStatus = '正常'
				this.nutritionStatus = '良好'
				this.growthStatus = isPuppy ? '发育正常' : '保持健康'
				this.checkupAdvice = '定期体检'
			},
			selectRecommendedProducts(healthCondition, petCategory, ageGroup) {
				if (!this.allProducts || this.allProducts.length === 0) {
					console.log('没有可用的商品数据')
					return
				}

				// 关键词映射，用于筛选产品
				const keywordMap = {
					dog: {
						underweight: ['高能量', '增强体质', '发育', '强健骨骼'],
						overweight: ['低热量', '低脂', '减重', '控制体重', '老年犬'],
						normal: ['均衡营养', '全价', '成犬', '益生菌'],
						young: ['幼犬', '奶糕', '离乳期', '发育'],
						adult: ['成犬', '成年', '全价', '全阶段'],
						senior: ['老年', '关节', '护肾', '低脂']
					},
					cat: {
						underweight: ['高能量', '增强体质', '发育', '补水'],
						overweight: ['低热量', '低脂', '减重', '控制体重', '绝育猫'],
						normal: ['均衡营养', '全价', '成猫', '毛球'],
						young: ['幼猫', '奶糕', '羊奶粉', '离乳期'],
						adult: ['成猫', '成年', '全价', '全阶段'],
						senior: ['老年猫', '关节', '护肾', '易消化']
					}
				}

				// 默认关键词，适用于无法识别的宠物类型
				const defaultKeywords = {
					underweight: ['高能量', '增强体质', '发育'],
					overweight: ['低热量', '减重', '控制体重'],
					normal: ['均衡营养', '全价']
				}

				// 确定筛选关键词
				let keywords = []

				// 添加健康状况关键词
				if (petCategory === 'dog' || petCategory === 'cat') {
					keywords = keywords.concat(keywordMap[petCategory][healthCondition] || [])
					keywords = keywords.concat(keywordMap[petCategory][ageGroup] || [])
				} else {
					keywords = keywords.concat(defaultKeywords[healthCondition] || [])
				}

				// 筛选相关产品
				let relevantProducts = this.allProducts.filter(product => {
					// 检查商品名称和描述是否包含关键词
					const productName = product.tradeName || ''
					const productDesc = product.introduction || ''

					// 筛选适合宠物类型的产品
					const isForCorrectPet = (petCategory === 'dog' && (productName.includes('犬') || productName
							.includes('狗'))) ||
						(petCategory === 'cat' && productName.includes('猫')) ||
						petCategory === 'other'

					if (!isForCorrectPet) return false

					// 检查是否包含关键词
					return keywords.some(keyword =>
						productName.includes(keyword) || productDesc.includes(keyword)
					)
				})

				// 如果找不到足够的相关产品，添加适合该宠物类型的通用产品
				if (relevantProducts.length < 3) {
					const genericProducts = this.allProducts.filter(product => {
						const productName = product.tradeName || ''

						// 筛选适合宠物类型的产品
						return (petCategory === 'dog' && (productName.includes('犬') || productName.includes(
								'狗'))) ||
							(petCategory === 'cat' && productName.includes('猫')) ||
							petCategory === 'other'
					})

					// 添加没有在relevantProducts中的产品
					for (const product of genericProducts) {
						if (!relevantProducts.find(p => p.id === product.id)) {
							relevantProducts.push(product)
							if (relevantProducts.length >= 5) break
						}
					}
				}

				// 选取主推荐产品和个性化推荐列表
				if (relevantProducts.length > 0) {
					// 主推荐产品
					const mainProduct = relevantProducts[0]
					this.recommendedProduct = {
						name: mainProduct.tradeName || '推荐产品',
						desc: mainProduct.introduction || '适合您宠物的健康产品',
						image: mainProduct.picture || '/static/pet-test.png',
						price: mainProduct.prices || 0,
						id: mainProduct.id || 0
					}

					// 个性化推荐列表（不包括主推荐产品）
					this.recommendList = relevantProducts.slice(1, 3).map(product => ({
						name: product.tradeName || '推荐产品',
						desc: product.introduction || '适合您宠物的健康产品',
						image: product.picture || '/static/pet-test.png',
						price: product.prices || 0,
						id: product.id || 0
					}))
				} else {
					// 如果没有找到相关产品，使用默认推荐
					this.setDefaultRecommendations(petCategory, ageGroup)
				}
			},
			setDefaultRecommendations(petCategory, ageGroup) {
				// 默认推荐产品
				if (petCategory === 'dog') {
					this.recommendedProduct = {
						name: '宠乐优选 天然无谷成犬粮',
						desc: '无谷物配方，呵护敏感肠胃',
						image: '/static/pet-test.png',
						price: 69.9,
						id: 1
					}

					this.recommendList = [{
							name: '优倍滋 全阶段犬粮',
							desc: '含益生菌，促进消化',
							image: '/static/pet-test.png',
							price: 89.9,
							id: 5
						},
						{
							name: '汪星人 钙片120片',
							desc: '强化骨骼发育',
							image: '/static/pet-test.png',
							price: 65.0,
							id: 7
						}
					]
				} else if (petCategory === 'cat') {
					this.recommendedProduct = {
						name: '健康宠粮 全价冻干猫粮',
						desc: '冻干占比30%，高蛋白低脂',
						image: '/static/pet-test.png',
						price: 79.9,
						id: 3
					}

					this.recommendList = [{
							name: '爱宠世家 幼猫专用羊奶粉',
							desc: '模拟母乳成分，易吸收',
							image: '/static/pet-test.png',
							price: 55.0,
							id: 2
						},
						{
							name: '喵主子 主食猫条',
							desc: '慕斯质地，补水神器',
							image: '/static/pet-test.png',
							price: 45.9,
							id: 6
						}
					]
				} else {
					// 其他宠物通用推荐
					this.recommendedProduct = {
						name: '小宠日记 仓鼠营养粮',
						desc: '科学配比，防挑食',
						image: '/static/pet-test.png',
						price: 25.9,
						id: 10
					}

					this.recommendList = [{
							name: 'AquaPets 热带鱼饲料',
							desc: '增强体色，不浑水',
							image: '/static/pet-test.png',
							price: 19.9,
							id: 11
						},
						{
							name: '小宠日记 仓鼠跑轮',
							desc: '防滑支架安全耐用',
							image: '/static/pet-test.png',
							price: 35.9,
							id: 19
						}
					]
				}
			},
			healthFiles() {
				uni.navigateTo({
					url: '/pages/health/healthFiles'
				})
			},
			petInfo() {
				uni.navigateTo({
					url: '/pages/mine/petInfo'
				})
			},
			goShop() {
				uni.switchTab({
					url: '/pages/shop/shop'
				})
			},
			goIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goForum() {
				uni.switchTab({
					url: '/pages/forum/forum'
				})
			},
			goMine() {
				uni.switchTab({
					url: '/pages/mine/mine'
				})
			},
			goMsg(id) {
				getApp().globalData.currentHealthMsg = id
				uni.navigateTo({
					url: '/pages/health/healthMsg'
				})
			},
			goShopCar() {
				uni.navigateTo({
					url: '/pages/shop/shopCar'
				})
			}
		}
	}
</script>

<style>
	/* 引入Bootstrap 5 */
	@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css');

	/* 全局样式 */
	.pet-health-web-app {
		font-family: 'Microsoft YaHei', Arial, sans-serif;
	}

	/* 顶部导航栏样式 */
	.top-navbar {
		background-color: white;
		padding: 15px 0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	.logo {
		display: flex;
		align-items: center;
	}

	.logo image {
		width: 60px;
		height: 60px;
		margin-right: 15px;
	}

	.logo .titleText {
		font-size: 24px;
		font-weight: bold;
		color: #000000;
	}

	.navbar-center {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.nav-categories {
		display: flex;
	}

	.nav-item {
		padding: 8px 15px;
		color: #000000;
		font-size: 20px;
		font-weight: bold;
		cursor: pointer;
		margin-right: 10px;
		border-radius: 5px;
		transition: all 0.3s;
	}

	.nav-item:hover {
		background-color: rgba(255, 255, 255, 0.2);
	}

	.search-container {
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 50px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		max-width: 300px;
	}

	.search-container image {
		width: 20px;
		height: 20px;
		margin-left: 10px;
	}

	.search-input {
		flex: 1;
		border: none;
		outline: none;
		font-size: 15px;
		padding: 5px 5px;
		background-color: transparent;
	}

	.search-btn {
		background-color: #F9CB43;
		color: #fff;
		border: none;
		border-radius: 0 50px 50px 0;
		padding: 5px 15px;
		font-size: 14px;
		cursor: pointer;
	}

	.user-actions {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 20px;
		cursor: pointer;
	}

	.action-item image {
		width: 24px;
		height: 24px;
	}

	.action-item .titleText {
		margin-top: 5px;
		color: #000000;
		font-size: 14px;
	}

	/* 主要内容区域 */
	.main-content {
		padding-top: 120px;
		/* 为固定导航栏留出空间 */
		padding-bottom: 50px;
	}

	/* 宠物信息卡片 */
	.pet-profile-card {
		background: linear-gradient(to right, #F9CB43, #FFDA7A);
		padding: 20px;
		border-radius: 15px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		cursor: pointer;
	}

	.pet-avatar {
		width: 120px;
		height: 120px;
		border-radius: 50%;
		border: 6px solid #FFFFFF;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	.pet-info {
		display: flex;
		align-items: center;
	}

	.pet-name {
		font-size: 24px;
		font-weight: bold;
		color: #333;
		margin-right: 20px;
	}

	.pet-detail {
		font-size: 16px;
		color: #555;
		background-color: rgba(255, 255, 255, 0.6);
		padding: 5px 15px;
		border-radius: 20px;
	}

	/* 各区块通用样式 */
	.health-archive,
	.health-knowledge,
	.personalized-recommend {
		background-color: white;
		border-radius: 15px;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
		padding: 10px;
		/* height: 100%; */
	}

	.section-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		margin-bottom: 10px;
	}

	.title-text {
		font-size: 20px;
		font-weight: bold;
		position: relative;
		padding-left: 15px;
	}

	.title-text::before {
		content: '';
		position: absolute;
		left: 0;
		top: 5px;
		height: 20px;
		width: 5px;
		background-color: #F9CB43;
		border-radius: 3px;
	}

	.more-link {
		color: #666;
		font-size: 14px;
		cursor: pointer;
	}

	/* 健康档案卡片样式 */
	.archive-card {
		background: linear-gradient(to bottom, #f9f9f9, #f5f5f5);
		border-radius: 12px;
		padding: 15px;
		display: flex;
		align-items: center;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		height: 100%;
	}

	.card-icon {
		width: 50px;
		height: 50px;
		background-color: rgba(249, 203, 67, 0.2);
		border-radius: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 15px;
		flex-shrink: 0;
	}

	.iconfont {
		width: 25px;
		height: 25px;
	}

	.card-content {
		display: flex;
		flex-direction: column;
	}

	.card-label {
		font-size: 14px;
		color: #888;
		margin-bottom: 5px;
	}

	.card-value {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	/* 推荐产品样式 */
	.recommended-product {
		margin: 20px 15px;
	}

	.recommend-title {
		font-size: 16px;
		margin-bottom: 10px;
		display: block;
		color: #666;
	}

	.product-card {
		background-color: #f9f9f9;
		border-radius: 12px;
		padding: 15px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	.product-image {
		width: 100%;
		/* aspect-ratio: 1; */
		height: 140px;
		border-radius: 10px;
		object-fit: cover;
	}

	.product-info {
		padding: 0 10px;
	}

	.product-name {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 5px;
		display: block;
	}

	.product-desc {
		font-size: 14px;
		color: #888;
		margin-bottom: 10px;
		display: block;
	}

	.product-price {
		color: #FF6B35;
		font-weight: bold;
		font-size: 16px;
		display: block;
	}

	/* 健康知识样式 */
	.knowledge-items {
		padding: 0 15px;
	}

	.knowledge-item {
		text-align: center;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		transition: transform 0.3s;
		cursor: pointer;
	}

	.knowledge-item:hover {
		transform: translateY(-5px);
	}

	.knowledge-image {
		width: 100%;
		aspect-ratio: 16/9;
		border-radius: 12px 12px 0 0;
		object-fit: cover;
	}

	.knowledge-title {
		display: block;
		padding: 10px;
		font-size: 16px;
		font-weight: bold;
		background-color: #f9f9f9;
		border-radius: 0 0 12px 12px;
	}

	/* 个性化推荐样式 */
	.recommend-content {
		padding: 0 15px;
	}

	.recommend-card {
		margin-bottom: 15px;
		background-color: #f9f9f9;
		border-radius: 12px;
		padding: 15px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		transition: transform 0.3s;
		cursor: pointer;
	}

	.recommend-card:hover {
		transform: translateY(-3px);
	}

	.recommend-image {
		width: 100%;
		height: 125px;
		/* aspect-ratio: 1; */
		border-radius: 10px;
		object-fit: cover;
	}

	.recommend-info {
		padding: 0 10px;
		position: relative;
	}

	.recommend-name {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 5px;
		display: block;
	}

	.recommend-desc {
		font-size: 14px;
		color: #888;
		margin-bottom: 10px;
		display: block;
	}

	.recommend-price {
		color: #FF6B35;
		font-weight: bold;
		font-size: 16px;
		display: block;
		margin-bottom: 30px;
	}

	.buy-btn {
		position: absolute;
		right: 0;
		bottom: 0;
		background-color: #F9CB43;
		color: #fff;
		font-size: 14px;
		padding: 5px 15px;
		border-radius: 30px;
		transition: all 0.3s;
	}

	.buy-btn:hover {
		background-color: #e6b93d;
		transform: scale(1.05);
	}

	/* 页脚样式 */
	.footer {
		background-color: #131917;
		color: #fff;
		padding: 50px 0 20px;
	}

	.footer-section {
		margin-bottom: 30px;
	}

	.footer-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20px;
		display: block;
		position: relative;
		padding-bottom: 10px;
	}

	.footer-title::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 50px;
		height: 2px;
		background-color: #F9CB43;
	}

	.footer-link {
		display: block;
		margin-bottom: 10px;
		color: #bbb;
		transition: all 0.3s;
		cursor: pointer;
	}

	.footer-link:hover {
		color: #F9CB43;
		padding-left: 5px;
	}

	.social-links {
		display: flex;
		margin-bottom: 15px;
	}

	.social-icon {
		font-size: 24px;
		margin-right: 20px;
		color: #bbb;
		transition: all 0.3s;
		cursor: pointer;
	}

	.social-icon:hover {
		color: #F9CB43;
		transform: scale(1.2);
	}

	.footer-contact {
		color: #bbb;
		font-size: 14px;
	}

	.copyright {
		text-align: center;
		margin-top: 30px;
		padding-top: 20px;
		border-top: 1px solid #444;
		color: #bbb;
		font-size: 14px;
	}

	/* 响应式调整 */
	@media (max-width: 991px) {
		.nav-categories {
			margin-left: 0;
		}

		.nav-item {
			font-size: 16px;
			padding: 6px 12px;
		}

		.search-container {
			max-width: 250px;
		}

		.pet-info {
			flex-direction: column;
			align-items: flex-start;
		}

		.pet-name {
			margin-bottom: 10px;
		}

		.pet-detail {
			margin-left: 0;
		}
	}

	@media (max-width: 767px) {
		.navbar-center {
			flex-direction: column;
		}

		.nav-categories {
			margin-bottom: 10px;
			justify-content: center;
			width: 100%;
		}

		.search-container {
			max-width: 100%;
			margin-top: 10px;
		}

		.user-actions {
			justify-content: center;
			margin-top: 10px;
		}

		.pet-avatar {
			width: 80px;
			height: 80px;
		}

		.pet-name {
			font-size: 20px;
		}

		.pet-detail {
			font-size: 14px;
		}
	}
</style>